feat: Add event creation, editing, and deletion#356
Open
tienou wants to merge 26 commits intoFamousWolf:mainfrom
Open
feat: Add event creation, editing, and deletion#356tienou wants to merge 26 commits intoFamousWolf:mainfrom
tienou wants to merge 26 commits intoFamousWolf:mainfrom
Conversation
Add a "+" button in each day cell to create calendar events directly from the card. Opens a dialog with title, calendar selector, start/end datetime. End date defaults to start + 1 hour. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Position the "+" button inline next to the day number instead of absolute top-right to avoid overlap with weather icons. Increase visibility and add hover background. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Increase button size to 32px, use primary color with subtle background, invert colors on hover for clear visual feedback. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Position "+" button at bottom-right of each day cell. Use subtle black/white styling with low opacity, more visible on hover. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use flow layout instead of absolute positioning so events don't cover the button. Align button to bottom-right with margin-left auto. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use absolute positioning with padding-bottom on day cells to ensure the + button is always aligned at the same position regardless of event count. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Give add-event button a card background color and z-index 10 so it always appears above events with colored backgrounds. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove absolute positioning, use flow layout so the + button always appears below the last event, aligned right. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Make .day a flex column so margin-top: auto on .add-event pushes it to the bottom of the cell, aligned across all days in the row. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Store uid/recurrence_id from API response. Add Modifier and Supprimer buttons to event details dialog. Edit works by deleting old event and creating a new one with updated fields. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace callService with callWS using calendar/event/delete and calendar/event/update WebSocket types, compatible with all HA versions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The edit dialog was likely failing silently because querySelector couldn't find form elements inside ha-dialog, or hass re-renders were resetting input values. Now stores form data in _editFormData reactive property with @input handlers, and uses ISO T-separator date format for the calendar/event/update WebSocket API. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Some calendar integrations (e.g. Google Calendar) don't support the calendar/event/update WebSocket API. Now falls back to deleting the event and recreating it with the new data. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Clicking an event now opens the edit dialog directly (skips details) - Events without uid still open the read-only details dialog - Delete button added to edit form (left-aligned, red) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Allow users to set a default calendar for event creation via the `defaultCalendar` config option (entity_id). The specified calendar will be pre-selected in the creation form dropdown. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add configurable show/hide toggles for: - showDayName, showDate, showTime, showCalendarName (default: false) - showWeather: master toggle for per-day weather in calendar (default: true) - showCurrentWeather: display current weather in card header (default: false) All options available in the GUI configuration editor. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add a theme configuration option (default/skylight) that allows users to switch between the original look and a Skylight-inspired design featuring pastel colored event backgrounds, rounded corners, calendar color dots, compact day headers, and inline add-event links. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds full CRUD (Create, Read, Update, Delete) capabilities for calendar events directly from the week-planner-card — no need to leave the card or use external tools.
Features
➕ Create events: A discreet "+" button appears at the bottom of each day cell. Clicking it opens a creation dialog pre-filled with the selected day's date (rounded to the next hour). The form includes title, calendar selector (populated from configured calendars), start date/time, and optional end date/time.
✏️ Edit events: Clicking on any event opens an edit dialog directly (single click workflow). The form is pre-filled with the event's current data (title, calendar, start/end times). Uses reactive form state (
_editFormDataproperty with@inputhandlers) to prevent value loss during re-renders.🗑️ Delete events: A delete button is available in the edit dialog, allowing users to remove events. Uses the
calendar/event/deleteWebSocket API with support for recurring events (recurrence_id+recurrence_range).🔄 Smart update fallback: Event updates first try the native
calendar/event/updateWebSocket API. If the calendar integration doesn't support it (returnsnot_supported), it automatically falls back to a delete + recreate strategy usingcalendar/event/delete+calendar.create_eventservice call.Technical details
_showCreateEventDialog,_showEditEventDialog,_editFormData_renderCreateEventDialog(),_renderEditEventDialog()_handleAddEventClick(),_handleCreateEvent(),_handleUpdateEvent(),_handleDeleteEvent(),_handleDeleteEventFromEdit(),_handleEditEventClick()this.hass.callService('calendar', 'create_event', ...)this.hass.callWS({ type: 'calendar/event/delete', ... })this.hass.callWS({ type: 'calendar/event/update', ... })with fallback_updateEvents()Screenshots
The "+" button is subtle (30% opacity) and becomes more visible on hover (80% opacity). The creation and edit dialogs use native HTML inputs for broad compatibility with Home Assistant.
Related issues
Closes #298
Test plan
🤖 Generated with Claude Code